<template>
    <div>
        <div v-show="detail.controlType == '1'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                      <a-input v-model="controlValue" @change="change" placeholder="请输入内容"></a-input>
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '2'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                      <a-textarea v-model="controlValue" @change="change" rows="4" placeholder="请输入内容" />
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '3'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <a-radio-group :name="detail.id" :options="detail.controls" v-model="selectValue" @change="change">

                    </a-radio-group>
                    <!-- <a-radio-group v-for="radio in detail.controls" :key="radio.id">
                        <a-radio :checked="detail.selectValue==radio.id" @click="change(detail,radio)">{{radio.value}}</a-radio>
                    </a-radio-group> -->
                    <!-- <a-radio-group :v-model="value" :options="detail.controls" />  :value="radio.id"-->
                      <!-- <div v-for="radio in controls" :key="radio.id" style="display: flex; margin-bottom: 10px">
                        
                    
                        <a-radio checked="true"></a-radio>
                      </div> -->
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '4'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <a-checkbox-group v-for="radio in detail.controls" :key="radio.id" v-model="selectids">
                        <a-checkbox  :value="radio.value"  @click="changeCheckBox(detail,radio)">{{radio.label}}</a-checkbox>
                    </a-checkbox-group>
                    <!-- <a-checkbox-group :options="detail.controls"></a-checkbox-group> :value="radio.IsChecked"-->
                      <!-- <a-input v-model="detail.controlValue" placeholder="请输入内容"></a-input> -->
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '5'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <j-image-upload fileList="" isMultiple  v-model="detail.controlValue" ></j-image-upload>
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '6'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <div style="display: flex;flex-direction: row;">
                    <j-date placeholder="请选择化学药剂有效期" v-model="effectiveDate" @change="changeDate" style="width: 100%" />
                    <a-button @click="checkhistory" type="primary" style="margin-left: 5px;">查看历史记录</a-button>
                  </div>
                      <a-radio-group :name="detail.id" v-model="selectValue" :options="detail.controls" @change="change">
                      </a-radio-group>
                      
                 
                    
                    <!-- <a-radio-group v-for="radio in detail.controls" :key="radio.id" v-model="selectValue">
                        <a-radio :value="radio.id" @click="change(detail,radio)">{{radio.value}}</a-radio>
                    </a-radio-group> -->
                    <!-- <a-checkbox-group v-for="radio in detail.controls" :key="radio.id">
                        <a-checkbox   @click="changeCheckBox(detail,radio)">{{radio.value}}</a-checkbox>
                    </a-checkbox-group> -->
                    <!-- <a-checkbox-group :options="detail.controls"></a-checkbox-group> :value="radio.IsChecked"-->
                      <!-- <a-input v-model="detail.controlValue" placeholder="请输入内容"></a-input> -->
                    </a-form-model-item>
                  </div>
                  <div v-show="detail.controlType == '7'">
                    <a-form-model-item
                      :label="detail.name"
                      :labelCol="labelCol"
                      :wrapperCol="wrapperCol"
                      prop="controlValue"
                    >
                    <div style="display: flex;flex-direction: row;">
                    <j-date placeholder="请选择运维材料有效期"  v-model="effectiveDate" @change="changeDate" style="width: 100%" />
                    <a-button @click="checkhistory" type="primary" style="margin-left: 5px;">查看历史记录</a-button>
                  </div>
                    <a-radio-group :name="detail.id" v-model="selectValue" :options="detail.controls" @change="change">
                    </a-radio-group>
                    <!-- <a-radio-group v-for="radio in detail.controls" :key="radio.id" v-model="selectValue">
                        <a-radio :value="radio.id" @click="change(detail,radio)">{{radio.value}}</a-radio>
                    </a-radio-group> -->
                    <!-- <a-checkbox-group v-for="radio in detail.controls" :key="radio.id">
                        <a-checkbox   @click="changeCheckBox(detail,radio)">{{radio.value}}</a-checkbox>
                    </a-checkbox-group> -->
                    <!-- <a-checkbox-group :options="detail.controls"></a-checkbox-group> :value="radio.IsChecked"-->
                      <!-- <a-input v-model="detail.controlValue" placeholder="请输入内容"></a-input> -->
                    </a-form-model-item>
                  </div>
                  <j-modal
              :visible.sync="modal.visible"
              :width="1200"
              :title="modal.title"
              :fullscreen.sync="modal.fullscreen"
              :switchFullscreen="modal.switchFullscreen"
            >

              <YksEquipmentDevopsHistoryDetailList :detail="detail"></YksEquipmentDevopsHistoryDetailList>

            </j-modal>
                  
    </div>
</template>

<script>
import { httpAction, getAction } from '@/api/manage'
import { validateDuplicateValue,randomUUID } from '@/utils/util'
import YksEquipmentDevopsHistoryDetailList from '../YksEquipmentDevopsHistoryDetailList.vue'
// import YksMaintenanceTemplateDetailForm from './YksMaintenanceTemplateDetailForm.vue'
// import YksMaintenanceTemplateModal from './YksMaintenanceTemplateModal'
import moment from 'dayjs'

export default {
    name: 'MaintenanceTemplateControl',
    components: {
    //   YksMaintenanceTemplateDetailForm,
    //   YksMaintenanceTemplateModal
    YksEquipmentDevopsHistoryDetailList
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false,
      },
      detail:{
        type:Object
      }
    },
    data() {
      return {
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          name: [{ required: true, message: '请输入名称!' }],
          equipmentId: [{ required: true, message: '请输入项目!' }],
          devopsPersontype: [{ required: true, message: '请输入运维类型!' }],
        },
        url: {
          // add: "/dev/yksEquipmentDevops/add",
          add: "/dev/yksEquipmentDevopsHistory/add",
          edit: '/dev/yksEquipmentDevops/edit',//用于更新运维单状态
          queryById: '/dev/yksEquipmentDevops/queryById',
          yksMaintenanceTemplateDetail: {
            list: '/dev/yksMaintenanceTemplate/queryYksMaintenanceTemplateDetailByMainId',
          },
          productlist: "/dev/devEquipmentConfigProduct/list",
          materiallist: '/dev/yksEquipmentConfigurationPart/list',
          historylist: "/dev/yksEquipmentDevopsHistory/list",
        },
        contexts: [],
        selectValue:'',
        isShowButton:false,
        isExecDevops:true,
        effectiveDate:'',
        controlValue:'',
        modal: {
          title: '运维历史明细',
          visible: false,
          fullscreen: false,
          switchFullscreen: true,
        },
        selectids:[]
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      debugger
     
      // this.selectValue=new Map()
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
    },
    mounted(){
      switch(this.detail.controlType){
          case "1":
          case "2":
          this.controlValue=this.detail.controlValue
            break;
          case "3":
          this.selectValue=this.detail.selectValue
          
            break;
            case "4":
              debugger
              this.selectids=this.detail.selectids
              break;
            case "6":
            case "7":
            this.selectValue=this.detail.maintenanceType
            this.effectiveDate=this.detail.effectiveDate
              break;
        }
    },
    methods: {
      change:function(e){
       debugger
        switch(this.detail.controlType){
          case "1":
          case "2":
            this.detail.controlValue=this.controlValue
            break;
          case "3":
            this.detail.selectValue=e.target.value
            break;
            case "6":
            case "7":
              this.detail.maintenanceType=e.target.value
              this.detail.maintenanceTypeName=e.target.name
              break;
        }
      },
      changeDate(date,dateString){
        debugger
        this.detail.effectiveDate=this.effectiveDate

      },
      changeCheckBox(detail,control){
        debugger
        if(!detail.selectids){
          detail.selectids=[]
        }    
        if(!control.IsChecked){
          control.IsChecked=true
          detail.selectids.push(control.id)
        }else{
          control.IsChecked=false
          for(var i=0;i<detail.selectids.length;i++){
            if( detail.selectids[i]==control.id){
              detail.selectids.splice(i,1)
            }
          }
        }
          
      },
      refresh() {
        debugger
        switch(this.detail.controlType){
          case "1":
          case "2":
          this.controlValue=this.detail.controlValue
            break;
          case "3":
          this.selectValue=this.detail.selectValue
            break;
            case "4":
              this.selectids=this.detail.selectids
              break;
            case "6":
            case "7":
            this.selectValue=this.detail.maintenanceType
            this.effectiveDate=this.detail.effectiveDate
              break;
        }
        this.$forceUpdate(); // 手动触发子组件的重新渲染
      },
      checkhistory(){
        this.modal.visible=true;
        // 使用$router对象进行编程式导航，跳转到目标组件，并传递参数
        
        // if(this.detail.controlType=='6'){
        //   this.$router.push({ path: '/yks/dev/yksEquipmentDevopsHistoryDetailList', query: { productId: this.detail.productId } });
        // }
        // if(this.detail.controlType=='7'){
        //   this.$router.push({ path: '/yks/dev/yksEquipmentDevopsHistoryDetailList', query: { marterialId: this.detail.marterialId } });
        // }
      }
      // add() {
      //   this.edit(this.modelDefault)
      // },
      // edit(record) {
        
      //   this.model = Object.assign({}, record)
      //   if(this.model.maintenanceStatus=='2'){
      //     this.loadHistoryData()
      //   }else{
      //    this.isShowButton=true
      //     // this.loadProduct()
      //     // this.loadMaterial()
      //     let templateids = this.model.templateId.split(',')
      //     for (var i = 0; i < templateids.length; i++) {
      //       let params = { id: templateids[i] }
      //       this.loadDetailData(params)
      //     }
      //   }
        
  
      //   this.visible = true
      // },
      // modalFormOk(){
      //   let contextlist=this.$refs.modalForm.contexts
      //   debugger
      //   if(contextlist.length>0){
      //     for(var i=0;i<contextlist.length;i++){
      //         for(var j=0;j<contextlist[i].details.length;j++){
      //           if(contextlist[i].details[j].controlType=='6'){
      //             this.loadProduct(contextlist[i],contextlist[i].details[j])
      //           }
      //           if(contextlist[i].details[j].controlType=='7'){
      //             this.loadMaterial(contextlist[i],contextlist[i].details[j])
      //           }
      //         }
      //         this.contexts.push(contextlist[i])
      //     }
      //   }
      // },
      // addMaintenanceContext() {
      //   debugger
      //   this.$refs.modalForm.currentEquipmentId = this.model.equipmentId
      //   // this.$refs.modelForm.isExecDevops=true;
      //     this.$refs.modalForm.add();
      //     this.$refs.modalForm.title = "新增";
      //     this.$refs.modalForm.disableSubmit = false;
          
      // },
      
      // loadHistoryData(){
      //   let params = { id: this.model.id }
      //     getAction(this.url.historylist, params)
      //     .then((res) => {
      //       if (res.success) {
      //         debugger
      //         let listContexts = res.result.records || res.result;
      //         if(listContexts.length>0){
      //           let record = listContexts[0]
      //             this.contexts = JSON.parse(record.maintenanceItem)
      //             for (var i = 0; i < this.contexts.length; i++) {
      //               for (var j = 0; j < this.contexts[i].details.length; j++) {
      //                 let detail = this.contexts[i].details[j];
      //                 if (detail.controlType == '3' || detail.controlType == '4') {
      //                   for (var k = 0; k < detail.controls.length; k++) {
      //                     if (detail.selectids.indexOf(detail.controls[k].id) < 0) {
      //                       // detail.controls.splice(k,1)
      //                     }
      //                   }
      //                 }
      //               }
      //             }
      //             this.model = Object.assign({}, record)
      //         }
              
       
              
      //         // for (var i = 0; i < listContexts.length; i++) {
      //         //   let context = {}
      //         //   context.details=[]
      //         //   context.id = listContexts[i].id
      //         //   context.name = listContexts[i].productName
  
  
      //         //   let detail={controlType:'6',effectiveDate:listContexts[i].effectiveDate}//8--时间格式
      //         //   detail.controls=[]
      //         //   detail.controls.push({id:'1',value:'检查'}) 
      //         //   detail.controls.push({id:'2',value:'更换'})// detail={controlType:'8',name:'有效期',controlValue:listContexts[i].effectiveDate}
      //         //   context.details.push(detail)
      //         //   this.contexts.push(context)
      //         // }
      //       } else {
      //         this.$message.warning(res.message)
      //       }
      //     })
      //     .finally(() => {
      //       this.loading = false
      //     })
      // },
      // loadProduct(context,detail){
      //   if(detail.productId){
      //     let params = { id: detail.productId }
      //     getAction(this.url.productlist, params)
      //     .then((res) => {
      //       debugger
      //       if (res.success) {
      //         let listContexts = res.result.records
      //         for (var i = 0; i < listContexts.length; i++) {
      //           // let context = {}
      //           // context.details=[]
      //           // context.id = listContexts[i].id
      //           context.name = listContexts[i].productName
      //           detail.name="有效期"
      //           detail.effectiveDate=listContexts[i].effectiveDate
      //           detail.productId=detail.productId
      //           detail.controls=[]
      //           detail.controls.push({id:'1',value:'检查',label:'检查'}) 
      //           detail.controls.push({id:'2',value:'更换',label:'更换'})// detail={controlType:'8',name:'有效期',controlValue:listContexts[i].effectiveDate}
      //           // context.details.push(detail)
      //           // this.contexts.push(context)
      //         }
      //       } else {
      //         this.$message.warning(res.message)
      //       }
      //     })
      //     .finally(() => {
      //       this.loading = false
      //     })
        
      //   }
        
        
      // },
      // loadMaterial(context,detail){
        
      //   if(detail.materialId){
      //     let params = { id: detail.materialId }
      //     getAction(this.url.materiallist, params)
      //     .then((res) => {
      //       debugger
      //       if (res.success) {
      //         let listContexts = res.result.records
      //         for (var i = 0; i < listContexts.length; i++) {
      //           debugger
      //           context.name = listContexts[i].materialName
      //           detail.name="有效期"
      //           detail.effectiveDate=listContexts[i].effectiveDate
      //           detail.marterialId=detail.marterialId
      //           detail.controls=[]
      //           detail.controls.push({id:'1',value:'检查',label:'检查'}) 
      //           detail.controls.push({id:'2',value:'更换',label:'更换'})
      //           detail.controls.push({id:'3',value:'维修',label:'维修'})
      //           // detail={controlType:'8',name:'有效期',controlValue:listContexts[i].effectiveDate}
      //           // context.details.push(detail)
      //           // this.contexts.push(context)
      //         }
      //       } else {
      //         this.$message.warning(res.message)
      //       }
      //     })
      //     .finally(() => {
      //       this.loading = false
      //     })
        
      // }
      // },
      // submitForm() {
      //   this.saveDevopsHistory()
      //   //更新保养单信息
      //   this.updateDevops()
      // },
      // saveDevopsHistory(){
      //   const that = this
      //   let valid=true
      //   this.$refs.form.validate((valid) => {
      //     if (valid) {
      //       that.confirmLoading = true
      //       let httpurl = ''
      //       let method = ''
      //     //   if (!this.model.id) {
      //         httpurl += this.url.add
      //         method = 'post'
      //     //   } else {
      //     //     httpurl += this.url.edit
      //     //     method = 'put'
      //     //   }
      //      this.model.devopsId=this.model.id
      //      this.model.maintenancePlanTime=this.model.maintenanceNextTime
      //      var myDate = new Date();
      //      this.model.maintenanceActualTime=myDate.getFullYear()+'-'+myDate.getMonth()+'-'+myDate.getDate()+' '+myDate.toLocaleTimeString()
      //       this.model.maintenanceItem=JSON.stringify(this.contexts)
      //       httpAction(httpurl, this.model, method)
      //         .then((res) => {
      //           if (res.success) {
      //             that.$message.success(res.message)
      //             that.$emit('ok')
      //           } else {
      //             that.$message.warning(res.message)
      //           }
      //         })
      //         .finally(() => {
      //           that.confirmLoading = false
      //         })
      //     }
      //   }
      //   )
      // },
      // updateDevops(){
  
      //   let that=this
      //   let valid=true
      //   if (valid) {
      //       that.confirmLoading = true
      //       let httpurl = ''
      //       let method = ''
      //         httpurl += this.url.edit
      //         method = 'put'
      //       this.model.maintenanceStatus='2'  //已处理
            
      //       httpAction(httpurl, this.model, method)
      //         .then((res) => {
      //           if (res.success) {
      //             that.$message.success(res.message)
      //             that.$emit('ok')
      //           } else {
      //             that.$message.warning(res.message)
      //           }
      //         })
      //         .finally(() => {
      //           that.confirmLoading = false
      //         })
      //     }
      // }, 
      // loadDetailData(params) {
      //   getAction(this.url.yksMaintenanceTemplateDetail.list, params)
      //     .then((res) => {
            
      //       if (res.success) {
      //         let listContexts = res.result.filter((p) => p.extText == 'context')
      //         for (var i = 0; i < listContexts.length; i++) {
      //           let context = {}
      //           context.id = listContexts[i].id
      //           context.name = listContexts[i].name
      //           context.extText = listContexts[i].extText
      //           context.extText1 = listContexts[i].extText1
      //           this.contexts.push(context)
      //         }
      //         debugger
      //         for (var i = 0; i < this.contexts.length; i++) {
      //           this.contexts[i].details = res.result.filter(
      //             (p) => p.extText == 'control' && p.extText1 == this.contexts[i].extText1
      //           )
      //           for (var j = 0; j < this.contexts[i].details.length; j++) {
      //             let detail = this.contexts[i].details[j]
      //             if (detail.controlType == '3' || detail.controlType == '4') {
      //               let controls = JSON.parse(detail.controlValue)
      //               detail.controlValue = ''
      //               for(var k=0;k<controls.length;k++){
                      
      //                 //  detail.contorls[k].IsChecked=false
      //                 controls[k].label=controls[k].value
      //                 controls[k].value=controls[k].id
      //               }
      //               detail.controls=controls
      //             //   detail.contorls.foreach(p=>p.IsChecked=false)
  
      //             }else if(detail.controlType=='6'){
      //               this.loadProduct(this.contexts[i],detail)
      //             }else if(detail.controlType=='7'){
      //               this.loadMaterial(this.contexts[i],detail)
      //             }
      //           }
      //         }
      //         //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
      //         // this.dataSource = res.result.records||res.result;
      //         // if(res.result.total)
      //         // {
      //         //   this.ipagination.total = res.result.total;
      //         // }else{
      //         //   this.ipagination.total = 0;
      //         // }
      //         //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
      //       } else {
      //         this.$message.warning(res.message)
      //       }
      //     })
      //     .finally(() => {
      //       this.loading = false
      //     })
      // },
      // saveDevops(){
      //     let that=this
      //     let valid=true
      //     if (valid) {
      //         that.confirmLoading = true;
      //         let httpurl = '';
      //         let method = '';
      //         if(!this.model.id){
      //           httpurl+=this.url.add;
      //           method = 'post';
      //         }else{
      //           httpurl+=this.url.edit;
      //            method = 'put';
      //         }
      //         this.model.maintenanceItem=JSON.stringify(this.contexts)
      //         httpAction(httpurl,this.model,method).then((res)=>{
      //           if(res.success){
      //             that.$message.success(res.message);
      //             that.$emit('ok');
      //           }else{
      //             that.$message.warning(res.message);
      //           }
      //         }).finally(() => {
      //           that.confirmLoading = false;
      //         })
      //       }
      // },
      // formDevopsData(){
      //     let devopsItems
      //     for(var i=0;i<this.contexts.length;i++){
  
      //     }
      // }
    },
  }
  </script>